<template>
  <div class="dianx">
     <title1 tit="收藏"></title1>
    <div class="navx">
      <span class="iconfont icon-dianfei"></span
      ><span class="nav-dian">电费</span>
    </div>

    <div class="jiaofei2">
      <span class="jaiodian-1">缴费单位</span>
      <span class="jaiodian-2">国网北京市电力公司(只能电表)</span>
      <van-cell-group class="dian-cell">
        <van-field
          v-model="value"
          label="客户编号"
          placeholder="请输入用客户编号"
        />
      
      </van-cell-group>
    </div>

    <span class="zihu">同意《宜居自助缴费协议》</span>

    <button class="btn">下一步</button>
  </div>
</template>

<script>
import title1 from "../../../components/tit.vue";
export default {
  data() {
    return {
      value: "",
    };
  },
  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "LifeService" });
    },
  },
};
</script>

<style lang="less" scoped>
.dianx {
  width: 100%;
  height: 100%;
  background-color: #ebebeb;
  .navx {
    background-color: #fff;
    height: 90px;
    .icon-dianfei {
      display: inline-block;
      font-size: 45px;
      color: #f4ea2a;
      padding: 23px;
      vertical-align: middle;
    }

    .nav-dian {
      display: inline-block;
      font-size: 30px;
      color: #000000;
    }
  }

  .jiaofei2 {
    margin-top: 34px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
    .jaiodian-1 {
      display: inline-block;
      font-size: 30px;
      color: #000000;
      margin: 25px;
    }
    .jaiodian-2 {
      display: inline-block;
      font-size: 26px;
      color: #000000;
      margin-left:150px;
    }
  }
  .zihu {
     display: inline-block; 
     margin: 40px;
     font-size: 26px;
  }
   .btn {
    background-color: #ff5654;
    border: 1px solid #ff5654;
    width: 620px;
    text-align: center;
    height: 60px;
    border-radius: 10px;
    margin: 40px 0 0 40px;
    color: #fff;
    font-size: 36px;
    margin-left: 60px;
  }
}
</style>
